<template>
  <div class="com-container" :style="{ height: '672px' }">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  name: "Seller",
  data() {
    return {
      chartInstance: null, // chart的实例
      // allData是我们使用到的全部数据，先定义成静态的数据
      allData: [
        {
          name: "猪八戒",
          value: 182,
        },
        {
          name: "吕布",
          value: 260,
        },
        {
          name: "娜可露露",
          value: 300,
        },
        {
          name: "廉颇",
          value: 67,
        },
        {
          name: "太乙真人",
          value: 30,
        },
        {
          name: "鲁班大师",
          value: 35,
        },
        {
          name: "镜",
          value: 250,
        },
        {
          name: "周瑜",
          value: 222,
        },
        {
          name: "沈梦溪",
          value: 158,
        },
        {
          name: "不知火舞",
          value: 225,
        },
        {
          name: "公孙离",
          value: 290,
        },
        {
          name: "虞姬",
          value: 305,
        },
        {
          name: "橘右京",
          value: 178,
        },
        {
          name: "马超",
          value: 263,
        },
        {
          name: "姜子牙",
          value: 234,
        },
      ],
      currentPage: 1, // 当前页面
      totalPage: 0, //总的页数
      timeId: null,
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    clearInterval(this.timeId);
  },
  methods: {
    // 初始化chart对象的方法
    initChart() {
      // 基于准备好的com-chart，初始化echarts实例
      this.chartInstance = echarts.init(this.$refs.seller_ref, "dark");
      // 图标初始化的配置项
      const initOption = {
        title: {
          text: "英雄击杀总数",
          textStyle: {
            fontSize: 66,
          },
          left: 30,
          top: 30,
        },
        grid: {
          top: "25%",
          left: "5%",
          right: "5%",
          bottom: "15%",
          // 百分比的距离包含 坐标
          contianLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              width: 66,
              color: "rgba(69, 79, 85, 0.5)",
            },
          },
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        series: [
          {
            type: "bar",
            barWidth: 66,
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "white",
                fontSize: 18,
              },
            },
            itemStyle: {
             
              barBorderRadius: [0, 33, 33, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0, 
                [
                  // 0%-100%的时候的颜色
                  { offset: 0.0, color: '#C6C72B'},
                  { offset: 0.2, color: '#C2C76E'},
                  { offset: 0.4, color: '#5AC75C'},
                  { offset: 0.6, color: '#C7B647'},
                  { offset: 1.0, color: '#11C725'},
                ]
              ),
            },
            emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: 'red'},
                  {offset: 0.7, color: '#2378f7'},
                  {offset: 1, color: '#83bff6'}
                  ]
                )
              }
            },
            },
        ],
      };

      this.chartInstance.setOption(initOption);
      // 对 图标对象进行鼠标事件的监听
      // 鼠标放入的时候我们就停止跳动
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      // 鼠标移除的时候我们就开始跳动
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    getData() {
      // 动态的获取数据
      // TODO
      // 对allData 进行排序
      this.allData.sort((a, b) => {
        return b.value - a.value;
      });
      // 每页只显示5条数据
      this.totalPage =
        this.allData.length % 5
          ? this.allData.length / 5
          : this.allData.length / 5 + 1;

      // 调用updateChart 更新数据
      this.updateChart();
      this.startInterval();
    },
    updateChart() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      const showData = this.allData.slice(start, end);
      //   const sellerName = this.showData((item) => {
      //       return item.name
      //   })
      //   const sellerValue = this.showData((item) => {
      //       return item.value
      //   })
      // console.log(sellerName)
      // console.log(sellerValue)
      // console.log(this.allData)
      const sellerName = [];
      const sellerValue = [];
      for (const item of showData) {
        sellerName.push(item.name);
        sellerValue.push(item.value);
      }
      console.log(sellerName);
      console.log(sellerValue);

      const dataOption = {
        yAxis: {
          data: sellerName,
        },
        series: [
          {
            data: sellerValue,
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      // 需要每个三秒进行一次翻页
      // 每个三秒对currentPage进行++
      this.timeId = setInterval(() => {
        // 写进行的操作, currentPage不能超过totalPage，
        // currentPage ++ 之后需要执行updateChart方法
        this.currentPage++;
        if (this.currentPage >= this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3 * 1000);
    },
    // 当浏览器的大小发生变化的时候，会调用来完成屏幕的大小适配
    screenAdapter() {
      // 监听屏幕宽度的变化
      // console.log(this.$refs.seller_ref.offsetWidth)
      const titleFontSize = (this.$refs.seller_ref.style.width / 100) * 3.6;
      // 完成跟屏幕分辨率相关的配置
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            textStyle: {
              width: titleFontSize,
            },
          },
        },
        series: {
          barWidth: titleFontSize,
          itemStyle: {
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 对图标实例对象进行resize，要手动去执行resize
      this.chartInstance.resize();
    },
  },
};
</script>
 
<style scoped lang="less">
.com-page {
      width: 100%;
    height: 672px;
    overflow: hidden;
}
</style>